<template>
    <el-card class="box-card">
        <template #header>
            <div id="card-header">
                <span>
                    菜单权限
                </span>
            </div>
        </template>

        <el-tree class="tree-node" :data="tree" :props="defaultProps" default-expand-all>
            <template #default="{node,data}">
                <div class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <div class="actions">
                        <el-button @click.stop="edit(node,data)" icon="edit" type="primary" size="small" link>编辑
                        </el-button>
                        <el-button @click.stop="add(node,data)" icon="plus" type="success" size="small" link>添加
                        </el-button>
                        <el-button @click.stop="remove(node,data)" icon="delete" type="danger" size="small" link>删除
                        </el-button>
                    </div>
                </div>
            </template>
        </el-tree>
    </el-card>
    <!-- 编辑分类 -->
    <el-dialog v-model="edit_dialogVisible" title="添加分类" width="30%">
        <el-form ref="edit_formRef" :model="edit_form">
            <el-form-item label="标签名称" prop="name">
                <el-input v-model="edit_form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="edit_dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit()">保存</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加分类 -->
    <el-dialog v-model="add_dialogVisible" title="添加分类" width="30%">
        <el-form ref="add_formRef" :rules="rules" :model="add_form">
            <el-form-item label="标签名称" prop="name">
                <el-input v-model="add_form.name" />
            </el-form-item>
            <el-form-item label="组件名称" prop="name">
                <el-input v-model="add_form.component" />
            </el-form-item>
            <el-form-item label="组件路径" prop="name">
                <el-input v-model="add_form.path" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="name">
                <el-input v-model="add_form.menu_order" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="add_dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd()">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import menu from '@/api/menu'
// import { ElMessage } from 'element-plus';

// 分级数据
let tree = ref([]);
const defaultProps = {
    children: 'children',
    label: 'name',
}
let loadlist = async () => {
    let { status, msg, data } = await menu.list({ type: 'tree' });
    if (status) {
        tree.value = data;
        // console.log(tree.value);
    } else {
        ElMessage.error(msg)
    }
}
loadlist();
let edit_dialogVisible = ref(false);
//缓存当前节点数据
let current_data = ref();
//缓存当前节点，用来更改DOM
let current_node = ref();
//缓存节点修改值
let edit_form = ref();
//编辑列表
let edit = (node, data) => {
    current_data.value = data;
    current_node.value = node;
    // 还原表单,拷贝??
    edit_form.value = { ...data }
    // console.log(data, { ...data });
    edit_dialogVisible.value = true;
}

let handleEdit = async () => {
    let { status, msg } = await menu.update(current_data.value.id, { ...edit_form.value });
    if (status) {
        current_node.value.data = { ...edit_form.value };
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
    edit_dialogVisible.value = false;
}

let add_dialogVisible = ref(false)
//缓存节点修改值
let add_form = ref({});
let add = (node, data) => {
    current_data.value = data;
    current_node.value = node;
    add_dialogVisible.value = true;
}
let handleAdd = async () => {
    // console.log({ ...add_form.value });
    let { status, msg, data } = await menu.add({ ...add_form.value, pId: current_data.value.id });
    if (status) {
        // 更新DOM
        //新节点数据
        const newChild = { ...data, ...add_form.value, children: [] }
        if (!current_data.value.children) {
            current_data.value.children = []
        }
        current_data.value.children.push(newChild);
        tree.value = [...tree.value];
        //消息通知
        ElMessage.success(msg)
    } else {
        ElMessage.error(msg)
    }
}

let remove = async (node, data) => {
    let { status, msg } = await menu.remove(data.id);
    if (status) {
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex((d) => d.id === data.id)
        children.splice(index, 1)
        tree.value = [...tree.value];
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }

}
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>